{# app/Resources/views/layout.html.twig #}

{% extends '::base.html.twig' %}

{% block title %}Layout General{% endblock %}

{% block body %}
    <header>
        <div class="first-top-bar">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <h1>Control</h1>
                        <nav>
                            <div class="nav-collapse collapse">
                                <ul class="nav pull-right">
                                    <li><a href="#">Profile</a></li>
                                    <li>
                                        <div class="number support-ticket">6</div>
                                        <a href="#">Support ticket</a></li>
                                    <li>
                                        <div class="number reminders">2</div>
                                        <a href="#">Reminders</a></li>
                                    <li>
                                        <div class="number messages">2</div>
                                        <a href="#">Messages</a>
                                    </li>
                                    <li><a href="#">Logout</a></li>
                                </ul>
                                <span class="clearfix"></span>
                            </div>
                            <!--/.nav-collapse -->
                        </nav>
                    </div>
                </div>
            </div>
            <!-- /.first-top-bar -->
        </div>

        <div class="second-top-bar">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="header-bar">
                        <div class="span5"><h2>Table elements</h2></div>
                        <div class="span4 offset3">
                            <div class="logged-user pull-right">
                                <div class="btn-group">
                                    <div class="btn">
                                        <div>Logged in as <strong>Marcus</strong> <br class="visible-phone">- Settings</div>
                                        <img src="{{ asset('public/img/avatar_48.jpg') }}" class="avatar" width="48" height="48" alt="Marcus">
                                    </div>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <!-- dropdown menu links -->
                                        <li><a href="#"><i class="panel-icon-monitor"></i> Settings</a></li>
                                        <li><a href="#"><i class="panel-icon-user"></i> Profile</a></li>
                                        <li><a href="#"><i class="panel-icon-key"></i> Change Password</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#"><i class="panel-icon-lock"></i> Logout</a></li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <!-- /.logged-user -->
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <!-- /.header-bar -->
                    </div>
                    <!-- /.row-fluid -->
                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- /.second-top-bar -->
        </div>
    </header>

    <div class="container-fluid">
    <div class="row-fluid">
        <div class="msg-user">
            <div class="span4"><h4>Go view the website live</h4></div>
            <div class="span4 offset4">
                <form id="form-search" class="pull-right" action="#" enctype="application/x-www-form-urlencoded">
                    <div class="input-append">
                        <input class="input-large" id="appendedInputButton" size="16" type="text" placeholder="Search here">
                        <button class="btn" type="button"><i class="panel-icon-search"></i></button>
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>
            <!-- /.msg-user -->
        </div>
    </div>

    <div class="row-fluid">
    <div class="main-content">
    <div class="span3">
        <div id="left-bar">
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapseDashboard">
                            <i class="panel-icon-home"></i>Gestionar Producto
                            <span class="caret pull-right"></span>
                        </a>
                    </div>
                    <div id="collapseDashboard" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="unstyled">
                                <li><a href="control-panel.html">Nuevo Producto</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapseStatics">
                            <i class="panel-icon-chart-bar"></i>Gestionar Servicio
                            <span class="caret pull-right"></span>
                        </a>
                    </div>
                    <div id="collapseStatics" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="unstyled">
                                <li><i class="panel-icon-chart-line"></i> <a href="#">Nuevo Servicio</a></li>
                                <li><i class="panel-icon-chart-pie"></i> <a href="#">Eliminar Servicio</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapseTable">
                            <i class="panel-icon-table"></i>Table Elements
                            <span class="caret pull-right"></span>
                        </a>
                    </div>
                    <div id="collapseTable" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="unstyled">
                                <li>
                                    <i class="panel-icon-static-table"></i>
                                    <a href="tables.html">Static Table</a>
                                </li>
                                <li>
                                    <i class="panel-icon-static-table"></i>
                                    <a href="dynamic-tables.html">Dynamic Table</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapseGallery">
                            <i class="panel-icon-image"></i>Gallery &amp; Media
                            <span class="caret pull-right"></span>
                        </a>
                    </div>
                    <div id="collapseGallery" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="unstyled">
                                <li><a href="#">Gallery Element</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapseSocialMedia">
                            <i class="panel-icon-social-users"></i>Socialmedia Center
                            <span class="caret pull-right"></span>
                        </a>
                    </div>
                    <div id="collapseSocialMedia" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="unstyled">
                                <li><a href="#">Social Media Element</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapsePages">
                            <i class="panel-icon-pages"></i>Other Pages
                            <span class="caret pull-right"></span>
                        </a>
                    </div>
                    <div id="collapsePages" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul class="unstyled">
                                <li><i class="panel-icon-ui-windows"></i> <a href="ui-elements.html">UI Elements</a></li>
                                <li><i class="panel-icon-ui-windows"></i> <a href="ui-extra-elements.html">Extra UI Elements</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                           href="#collapseReminder">
                            <i class="panel-icon-bell"></i>Reminders
                            <div class="reminder-count pull-right">2</div>
                        </a>
                    </div>
                    <div id="collapseReminder" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <ul id="reminders" class="unstyled">
                                <li>
                                    <div class="icon-continer"><i class="panel-icon-calendar-32"></i></div>
                                    <div class="item-reminder"><span>1.</span> Update the new drivers in to our date center</div>
                                </li>
                                <li>
                                    <div class="icon-continer"><i class="panel-icon-calendar-32"></i></div>
                                    <div class="item-reminder"><span>2.</span> Update the new drivers in to our date center</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /#left-bar -->
        </div>
        <!-- /.span3 -->
    </div>

    <div class="span9">
        <div id="panel-content">
            <div class="row-fluid">
                <div class="page-header">
                    <h3>{% block content_title %}Static tables{% endblock %}</h3>
                </div>
            </div>

            <div class="row-fluid">
                {% block content_info %}
                    content info
                    {# endblock content_info #}
                {% endblock %}
                {#div.row-fluid#}
            </div>

            <!-- #panel-content -->
        </div>
        <!-- /.span9 -->
    </div>
    <div class="clearfix"></div>
    <!-- /.main-content -->
    </div>
    <div class="clearfix"></div>
    <!-- /.row -->
    </div>

    <footer>
        <div class="row-fluid">
            <div class="span5">
                <div id="footer-links">
                    <ul class="unstyled">
                        <li><a href="#">Logout</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Support</a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="span4 offset3">
                <p>2012 Copyright &copy; Control Admin</p>
            </div>
            <!-- /.row-fluid -->
        </div>
    </footer>
    <!-- /.container-fluid -->
    </div>
    <div id="top-link" alt="Top of Page">&nbsp;</div>
    {#endblock body#}
{% endblock %}